<template>
  <div style="display: flex; justify-content: space-between; width: 100%">
    <div>{{ treeNode.name }}</div>
    <div style="display: flex; gap: 10px">
      <div>{{ treeNode.manager }}</div>
      <div>
        <el-dropdown @command="onCommand">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">添加子部门</el-dropdown-item>
            <template v-if="!isRoot">
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="del">删除部门</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { delDepartment } from '@/api/departments';
export default {
  name: 'TreeTools',
  props: {
    isRoot: {
      type: Boolean,
      default: false,
    },
    treeNode: {
      required: true,
      type: Object,
    },
  },
  methods: {
    async onCommand(command) {
      if (command === 'del') {
        // 做删除操作，部门数据 是  this.treeNode

        await this.$confirm(
          `你确定要删除 "${this.treeNode.name}" 部门吗?`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        );

        // 能走到这里，说明用户点了 确定 按钮

        // 发请求，删除数据

        // await delDepartment(this.treeNode.id);

        // 只要能走到这里，说明删除成功了
        this.$message.success(`"${this.treeNode.name}" 部门删除成功`);

        // 告诉父组件，我已经删除了
        this.$emit('deleted', this.treeNode);
      } else if (command === 'add') {
        this.$emit('add', this.treeNode);
      } else if (command === 'edit') {
        this.$emit('edit', this.treeNode);
      }
    },
  },
};
</script>

<style></style>
